<template>
  <van-tabbar v-model="active"  route active-color="#1baeae" class="tabar">
  <van-tabbar-item icon="wap-home-o" to="/home">首页</van-tabbar-item>
  <van-tabbar-item icon="apps-o" to="/catogory">分类</van-tabbar-item>
  <van-tabbar-item icon="shopping-cart-o" :to="isLogin ? '/cart': '/login' " :badge="!count ? '': count">购物车</van-tabbar-item>
  <van-tabbar-item icon="contact" :to="isLogin ? '/mine': '/login' ">我的</van-tabbar-item>
</van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';

import {ref, computed, onMounted} from 'vue'
import {useStore} from 'vuex'
export default {
   components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
    setup() {
        const active = ref('/home')
        const store = useStore()
        const count =  computed(() => {
        return store.state.cartCount
    })
        onMounted(() => {
          
            store.dispatch('updateCart')
            store.commit('loginStatus')
          
            // console.log(store.state.cartCount);
        })
       
    const isLogin = computed(() => {
      return store.state.isLogin
    })
        return {
            active,
            count,
            isLogin
        }
    }
}
</script>

<style>
.van-tabbar-item--active {
  color:#1baeae;
  bottom: 0;
}
.tabar{
  position: fixed;
  bottom: 0;
}
</style>